<template>
    <div>
        <a-page-header :title="title" :avatar="avatar"
        :sub-title="subTitle"
        >
    <template #extra>
        <!-- 过渡动画 -->
       <transition name="fade" mode="out-in">
        <!-- //设置一个条件 日志页面时候不会出现返回首页按钮 -->
    <a-button type="primary" @click="backHomePage" v-if="backShowStatus">
        <LeftCircleOutlined />
        返回首页</a-button>
       </transition>
    </template>
<template #footer>
    <slot name="footer" />
    </template>
</a-page-header>
</div>
</template>

<script>
    import {
        PageHeader
    } from "ant-design-vue";
    import {
        LeftCircleOutlined
    } from "@ant-design/icons-vue";
    //引入路由跳转方法
    import {
        useRoutePathToPage
    } from "@u/router";
    import {
        useNotOnRouteWhiteListStatus
    } from "@u/route.js"
    export default {
        components: {
            APageHeader: PageHeader,
            LeftCircleOutlined
        },
        props: {
            config: {
                type: Object,
                default: () => ({}),
            }
        },
        setup(props) {
            const {
                avatar = {}, title, subTitle, unwantedBackWhiteList, homePath
            } = props.config || {};
            //定义几个默认值  没有动态数据的时候用

            avatar.size = avatar.size || "large"
            avatar.shape = avatar.shape || "square"

            const backHomePage = useRoutePathToPage(homePath)
            const backShowStatus = useNotOnRouteWhiteListStatus(unwantedBackWhiteList)

            return {
                avatar,
                title,
                subTitle,
                backHomePage,
                backShowStatus
            }
        }
    }
</script>
<style>

</style>